<template>
  <view class="container">
    <swiper class="swiper"
            @change="change_swiper"
            autoplay="true"
            :style="{width:width,height:height}"
            :indicator-dots="false">
      <swiper-item v-for="(value,key) in banner" :id="value.goods_id" :key="key">
        <image :style="{width:width,height:height}" :id="value.goods_id" :src="url+value.goods_img" ></image>
      </swiper-item>
    </swiper>
    <view class="y" :style="{top:y}">{{n}}/{{t}}</view>
    <view class="title">
      <view class='title_price'>{{goods.integral_price}} 积分
        <text>￥0</text>
      </view>
    </view>
    <view class="title_goods_name">{{goods.goods_name}}</view>
    <view class="title_remark">{{goods.title}}</view>
    <view class="menu_title">
      <view class="content_name">商品详情</view>
      <view class="line"></view>
    </view>
    <view class='shop_info_view'>
      <rich-text :nodes="goods.describe"></rich-text>
    </view>
    <view class='foot'>
      <block>
        <view class='foot_right'  v-on:click='buy_submit' v-if="goods_status==1">立即兑换</view>
        <view class="foot_button"  v-if="goods_status==0">已售罄</view>
      </block>
    </view>
    <view class="mask" :style="{width:width,height:h}" v-show="display==1" v-on:click="dialog_close"></view>
    <view class="dialog" :style="{width:width}" v-show="display==1">
      <view class="dialog_goods">
        <view class="dialog_pic">
          <image mode="widthFix" :src="logo"></image>
        </view>
        <view class="goods_con">
          <view class="dialog_price">{{goods.integral_price}}积分
          </view>
          <view class="dialog_y">已售：{{goods.sum}}件</view>
        </view>
      </view>
      <view class="specs"  v-if="price.length>0">
        <view class="specs_title">规格</view>
        <view class="specs_unit" :class="item.checked==1?'current_tag':'tag'" v-for="(item,index) in price" :id="item.price_id" :key="index" v-on:click="select_tag">
          <image mode="widthFix" :src="url+item.imgurl"></image>
          <view class="specs_name">{{item.specs_name}}</view>
        </view>
      </view>
      <view class="specs" v-else>
        <view class="specs_title">规格</view>
        <view class="specs_unit">无</view>
      </view>
      <!--			<view class="dialog_number">-->
      <!--				<view class="label_name">购买数量</view>-->
      <!--				<view class="number_con" v-if="goods.free_goods==0">-->
      <!--					<view class='jian'  v-on:click='jian'>-->
      <!--						<image src='../../static/images/jian.png'></image>-->
      <!--					</view>-->
      <!--					<view class='number_number'>{{number}}</view>-->
      <!--					<view class='jian'  v-on:click='jia'>-->
      <!--						<image src='../../static/images/jia.png'></image>-->
      <!--					</view>-->
      <!--				</view>-->
      <!--				<view class="number_con" v-else><view class='number_number'>{{number}}</view></view>-->
      <!--			</view>-->

      <view class="dialog_foot">
        <block>
          <view class='foot_right' data-type="buy"  v-on:click='buy' v-if="goods_status==1" v-show="integral_status==1">立即兑换</view>
          <view class='foot_right1' data-type="buy" v-if="goods_status==1" v-show="integral_status==0">积分不足{{' '}}{{member_status}}</view>
          <view class='foot_right1' data-type="buy" v-if="goods_status==1" v-show="integral_status==-1" v-on:click="jump_login">请先登录</view>
          <view class="foot_button"  v-if="goods_status==0">已售罄</view>
        </block>
      </view>
    </view>
  </view>
</template>
<script>
//#ifdef H5
import wxjs   from '../../jweixin/lib/index.js';
//#endif
import toMpWeixin from '../../js_sdk/wzc-toMpWeixin/toMpWeixin.js';
export default {
  data() {
    return {
      width:'',
      height:'',
      h:'',
      pic_h:'',
      goods:{},
      price:[],
      banner:[],
      logo:'',
      goods_w:'',
      id:0,
      use_price:0,
      price_id:0,
      number:1,
      commission:0,
      display:0,
      start_status:1,
      goods_status:1,
      integral_status:1,
      member_status:0,
      specs:'选择规格',
      site:'',
      open_status:0,
      area_status:0,
      original:'',
      integral:0,
      open:1,
      area_value:'',
      title1:'',
      n:1,
      t:5,
      y:'',
      msg:'',
      member:[],
      type:'exchange',//exchange 积分兑换；buy  直接购买
      url: getApp().globalData.url,
      static_url:getApp().globalData.static
    }
  },
  onLoad(e)
  {
    var res = uni.getSystemInfoSync();
    var w = res.windowWidth;
    this.goods_w  = 4*150+"px";
    this.h = res.windowHeight+"px";
    this.height = w*4/4+"px";
    this.width  = w+"px";
    this.y = w-20+"px";
    this.pic_h  = w*0.96*0.25+"px";
    this.id     = e.id;
    // this.id     = 434;
    const scene = decodeURIComponent(e.scene);
    var upid    = uni.getStorageSync("upid");
    if(scene=="undefined"||scene==undefined)
    {
      if(upid=="" || upid==undefined || upid=="undefined")
      {
        if(e.upid==undefined)
        {
          uni.setStorageSync("upid",0);
        }
        else
        {
          uni.setStorageSync("upid",parseInt(e.upid));
        }
      }
    }
    else
    {
      uni.setStorageSync("upid",scene);
    }
    if(e.type=="order")
    {
      this.order_submit();
    }
    // this.initialize();
  },
  onShow(){
    this.initialize();
  },
  //#ifdef MP-WEIXIN
  onShareAppMessage(res) {
    var member_id = uni.getStorageSync("member_id");
    if(member_id=="")
    {
      var upid = 0;
    }
    else
    {
      var upid = member_id;
    }
    var title       = '谷牧之道-'+this.goods.goods_name;
    var imgurl      = this.logo;
    // var imgurl  = "https://zhangjie.jdmuguzhid.com/web/static/img/a.png";
    return {
      title: title,
      path: '/pages/mall/goods_detail?upid='+upid+'&id='+this.goods.goods_id,
      imageUrl:imgurl
    }
  },
  onShareTimeline(res)
  {
    var member_id = uni.getStorageSync("member_id");
    if(member_id=="")
    {
      var upid = 0;
    }
    else
    {
      var upid = member_id;
    }
    var title       = '谷牧之道-'+this.goods.goods_name;
    var imgurl      = this.logo;
    // var imgurl  = "https://zhangjie.jdmuguzhid.com/web/static/img/a.png";
    return {
      title: title,
      query: 'upid='+upid+'&id='+this.goods.goods_id,
      imageUrl:imgurl
    }
  },
  //#endif
  methods: {
    open_change:function(e)
    {
      if(e.detail.value)
      {
        this.open = 1;
      }
      else
      {
        this.open = 0;
      }
    },
    change_swiper:function(e)
    {
      var tmp = parseInt(e.detail.current);
      if(tmp%this.t==0)
      {
        this.n = 1;
      }
      else
      {
        this.n = tmp%this.t+1;
      }

    },
    share_config:function()
    {
      var that  = this;
      var site  = window.location.href;
      this.site = site;
      uni.request({
        url: this.url+"/wechat_share",
        data: {url:site},
        header: {'Content-Type': 'application/json'},
        success: function (res)
        {
          console.log(res.data);
          wxjs.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId,         // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr,   // 必填，生成签名的随机串
            signature: res.data.signature,        // 必填，签名
            jsApiList: ['updateAppMessageShareData','updateTimelineShareData']            // 必填，需要使用的JS接口列表
            // jsApiList:["onMenuShareTimeline","onMenuShareAppMessage","showMenuItems","hideMenuItems"]
          });
          wxjs.ready(function () {
            var shareData1 = {
              title:'谷牧之道-'+that.goods.goods_name, // 分享标题
              desc: '一站式购物平台，厂家产品会员价', // 分享描述  全国健康类产品，
              link: that.url+'/wap?#/pages/mall/goods_detail?id='+that.id+"&/",  // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: that.url+that.goods.imgurl, // 分享图标
              // type: '', // 分享类型,music、video或link，不填默认为link
              // dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function () {
                console.log("设置成功");
              }
            };
            var shareData2 = {
              title:'谷牧之道-'+that.goods.goods_name, // 分享标题
              link: that.url+'/wap?#/pages/mall/goods_detail?id='+that.id+"&/",  // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: that.url+that.goods.imgurl, // 分享图标
              success: function () {
                console.log("设置成功");
              }
            };
            wxjs.updateAppMessageShareData(shareData1);
            wxjs.updateTimelineShareData(shareData2);
          })

        }
      })
    },
    select_specs:function()
    {
      this.display = 1;
    },
    dialog_close:function()
    {
      this.display = 0;
    },
    contact:function()
    {
      uni.navigateTo({url:"/pages/member/service"})
    },
    jia:function()
    {
      if(this.goods.promotion==1 || this.goods.promotion_99==1 || this.result[i].promotion_399==1)
      {
        uni.showToast({
          title:"限购一个",
          duration:1500
        })
      }
      else
      {
        this.number++;
      }

    },
    jian:function()
    {
      if(this.number>1)
      {
        this.number--;
      }
    },
    buy:function(e)
    {
      var type = e.currentTarget.dataset.type;
      var phone = uni.getStorageSync("phone");
      var that = this;
      if(phone=="")
      {
        uni.navigateTo({
          url:"/pages/member/login"
        })
      }
      else
      {
        var status = 1;
        for(var i=0;i<that.price.length;i++)
        {
          if(this.price_id==that.price[i].price_id)
          {
            if(that.price[i].stock==0)
            {
              status = 0;
              uni.showToast({
                title:"已售罄",
                duration:1000,
                icon:"none"
              })
              break;
            }
          }
        }
        if(status==1)
        {
          var upid = uni.getStorageSync("upid");
          // if(this.goods.promotion==1)
          // {
          if(upid==0)
          {
            uni.showModal({
              title:"操作提示",
              content:"请先绑定推荐人",
              showCancel:false,
              success: (res) => {
                if(res.confirm)
                {
                  uni.switchTab({
                    url:"../member/index"
                  })
                }
              }
            })
            return;
          }
          // }
          var member_id = uni.getStorageSync("member_id");
          uni.request({
            url: this.url+'/wechat_add_goods_cart',
            data: {id:this.id,member_id:member_id,price_id:this.price_id,number:this.number,type:type,open:this.open},
            header: {'Content-Type': 'application/json'},
            success: (res) => {
              console.log(res.data.status);
              if(res.data.status==1)
              {
                that.order(type);
              }
              if(res.data.status==2)
              {
                uni.showModal({
                  title:"领取提示",
                  content:res.data.msg,
                  showCancel:false
                })
              }
            }
          })

        }
      }
    },
    order:function(type)
    {
      var phone = uni.getStorageSync("phone");
      var that = this;
      if(phone=="")
      {
        uni.navigateTo({
          url:"/pages/member/login"
        })
      }
      else
      {
        var member_id = uni.getStorageSync("member_id");
        //#ifdef H5
        uni.request({
          url: this.url+'/wechat_get_address',
          data: {member_id:member_id,type:2},
          header: {'Content-Type': 'application/json'},
          success: (res) => {
            if(res.data.status==1)
            {
              that.order_submit(type);
            }
            else
            {
              uni.showModal({
                title:"操作提示",
                content:"请先添加邮寄地址",
                showCancel:false,
                success: (address) => {
                  uni.navigateTo({
                    url:"/pages/member/address?type=goods&goods_id="+that.id
                  })
                }
              })
            }
          }
        });
        //#endif
        //#ifdef APP-PLUS || MP-WEIXIN
        this.order_submit(type);
        //#endif
      }
    },
    order_submit:function(type)
    {
      var member_id = uni.getStorageSync("member_id");
      var replace_id = uni.getStorageSync("replace_id");
      if(replace_id=="")
      {
        replace_id = 0;
      }
      var that = this;
      uni.request({
        url: this.url+'/wechat_add_order',
        data: {member_id:member_id,replace_id:replace_id,type:type,integral_order:1},
        header: {'Content-Type': 'application/json'},
        success: (res) => {
          if(res.data.status==1)
          {
            //#ifdef MP-WEIXIN
            uni.redirectTo({url:"/pages/mall/order?integral_type=1&type="+type+"&order_id="+res.data.order_id})
            //#endif
          }
          // if(res.data.status==1)
          // {
          // 	uni.showModal({ //提醒用户更新
          // 		title: "提示信息",
          // 		content: '兑换成功，请尽快到自提点 \'辽宁省沈阳市沈河区小西路3号\' 领取 ！',
          // 		success: (res) => {
          // 			if (res.confirm)
          // 			{
          // 				uni.redirectTo({
          // 					url:"/pages/member/order?status=2"
          // 				})
          // 			}
          // 		}
          // 	})
          // }
        }
      })
    },
    home:function()
    {
      uni.switchTab({url:"/pages/mall/index"});
    },
    cart:function(e)
    {
      var id = e.currentTarget.id;
      var phone = uni.getStorageSync("phone");
      var that = this;
      if(phone=="")
      {
        uni.navigateTo({
          url:"/pages/member/login"
        })
      }
      else
      {
        var upid = uni.getStorageSync("upid");
        if(this.goods.promotion==1)
        {
          if(upid==0)
          {
            uni.showModal({
              title:"操作提示",
              content:"请先绑定推荐人",
              showCancel:false,
              success: (res) => {
                if(res.confirm)
                {
                  uni.switchTab({
                    url:"../member/index"
                  })
                }
              }
            })
            return;
          }
        }
        uni.navigateTo({url:"/pages/mall/ycart"});
      }
    },
    add_cart:function(e)
    {
      // uni.navigateTo({url:"/pages/mall/cart"});return;
      var phone = uni.getStorageSync("phone");
      // console.log(phone);return;
      var that = this;
      if(phone==""||phone=="0")
      {
        uni.navigateTo({
          url:"/pages/member/login"
        })
      }
      else
      {
        var upid = uni.getStorageSync("upid");
        if(this.goods.promotion==1)
        {
          if(upid==0)
          {
            uni.showModal({
              title:"操作提示",
              content:"请先绑定推荐人",
              showCancel:false,
              success: (res) => {
                if(res.confirm)
                {
                  uni.switchTab({
                    url:"../member/index"
                  })
                }
              }
            })
            return;
          }
        }
        var status = 1;
        for(var i=0;i<that.price.length;i++)
        {
          if(this.price_id==that.price[i].price_id)
          {
            if(that.price[i].stock==0)
            {
              status = 0;
              uni.showToast({
                title:"已售罄",
                duration:1000,
                icon:"none"
              })
              break;
            }
          }
        }
        if(status==1)
        {
          var member_id = uni.getStorageSync("member_id");
          uni.request({
            url: this.url+'/wechat_add_goods_cart',
            data: {id:this.id,price_id:this.price_id,member_id:member_id,number:this.number},
            header: {'Content-Type': 'application/json'},
            success: (res) => {
              if(res.data.status==1)
              {
                uni.showToast({
                  title:"添加成功",
                  duration:2000
                })
                uni.navigateTo({url:"/pages/mall/ycart"});
              }

            }
          });
        }
      }
    },
    jump_login:function(e)
    {
      uni.switchTab({
        url: '/pages/member/index'
      });
    },
    initialize:function()
    {
      var that = this;
      var member_id = uni.getStorageSync("member_id");
      var replace_id = uni.getStorageSync("replace_id");
      if(replace_id=="")
      {
        replace_id = 0;
      }
      uni.request({
        url: this.url+'/wechat_goods',
        data: {id:this.id,member_id:member_id,replace_id:replace_id},
        header: {'Content-Type': 'application/json'},
        success: (res) => {
          console.log(res)
          if (res.data.member_status < res.data.result[0].integral_price)
          {
            that.integral_status = 0;
          }
          if (res.data.member_status == -1)
          {
            that.integral_status = -1;
          }
          // console.log(res.data);
          that.member_status   = res.data.member_status;
          that.msg   = res.data.msg;
          that.goods = res.data.result[0];
          that.logo  = that.url+res.data.result[0].imgurl;
          that.member = res.data.member;
          // console.log(that.goods.goods_status);
          // that.banner = res.data.img;
          that.t = res.data.img.length;
          for(var j=0;j<res.data.img.length;j++)
          {
            that.banner.push(res.data.img[j]);
          }
          that.use_price = res.data.result[0].price;//+"<text class='start'>起</text>";
          that.original  = res.data.result[0].original/100;
          if(res.data.price!=undefined && res.data.price.length>0)
          {
            that.price  = res.data.price;
            for(var i=0;i<that.price.length;i++)
            {
              if(i==0)
              {
                that.price[i].checked = 1;
                that.price_id   = that.price[i].price_id;
                that.use_price  = that.price[i].grade_price;//+"<text class='start'>起</text>";
                that.original   = that.price[i].original/100;
                that.commission = that.price[i].commission;
                that.integral   = that.price[i].point_price;
                // that.integral_price   = that.price[i].integral_price;
              }
              else
              {
                that.price[i].checked = 0;
              }
            }
          }

          //#ifdef H5
          var ua = navigator.userAgent.toLocaleLowerCase();
          if(ua.match(/MicroMessenger/i) == 'micromessenger')
          {
            this.site = window.location.href;
            this.share_config();
          }
          //#endif
        }
      });
    },
    add_cart_submit:function(e)
    {
      // console.log(this.goods_status);
      if(this.goods.goods_status==1)
      {
        this.display = 1;
      }
      else
      {
        uni.showModal({
          title:"操作提示",
          content:this.msg,
          showCancel:false
        })
      }
    },
    verify_area:function(e)
    {
      var member_id = uni.getStorageSync("member_id");
      uni.request({
        url: this.url+'/wechat_verify_area',
        data: {area:this.title1,goods_id:this.goods.goods_id,member_id:member_id},
        header: {'Content-Type': 'application/json'},
        success: (res) => {
          if (res.data.status==1)
          {
            uni.showModal({
              title:"提示信息",
              content: "通过！" +
                  "请点击立即购买继续操作",
              showCancel: false
            });
            this.area_status = 1;
          }
          else if(res.data.status==2)
          {
            uni.showModal({
              title:"提示信息",
              content: "代理区域格式错误",
              showCancel: false
            });
          }
          else
          {
            uni.showModal({
              title:"提示信息",
              content: "已存在该区域代理",
              showCancel: false
            });
          }
        },
        fail:function(ress)
        {
          uni.showModal({
            title:"提示信息",
            content: "系统错误",
            showCancel: false
          });
          console.log('fail:' + JSON.stringify(ress));
        }
      });
    },
    add_agent_area:function(e)
    {
      // console.log(this.goods_status);
      if(this.goods.goods_status==1)
      {
        this.display = 2;
      }
      else
      {
        uni.showModal({
          title:"操作提示",
          content:this.msg,
          showCancel:false
        })
      }
    },
    input_:function(e)
    {
      if(e.currentTarget.dataset.name=="title1")
      {
        this.title1 = e.target.value;
      }
    },
    area:function (e) {
      this.area = e.detail.value;
    },
    buy_submit:function(e)
    {
      // console.log(this.goods_status);
      if(this.goods.goods_status==1)
      {
        this.display = 1;
      }
      else
      {
        uni.showModal({
          title:"操作提示",
          content:this.msg,
          showCancel:false
        })
      }
    },
    buy_submit_2:function(e)
    {
      // console.log(this.goods_status);
      if(this.goods.goods_status==1)
      {
        this.display = 1;
      }
      else
      {
        uni.showModal({
          title:"操作提示",
          content:this.msg,
          showCancel:false
        })
      }
    },
    select_tag:function(e)
    {
      var id = e.currentTarget.id;
      var that = this;
      console.log(id);
      for(var i=0;i<that.price.length;i++)
      {
        that.price[i].checked = 0;
        // that.price_id = 0;
        if(parseInt(id)==that.price[i].price_id)
        {
          that.price[i].checked = 1;
          that.use_price        = that.price[i].grade_price;
          that.original         = that.price[i].original/100;
          that.price_id         = that.price[i].price_id;
          that.commission       = that.price[i].commission;
          that.specs            = that.price[i].specs_name;
          if(that.price[i].stock==0)
          {
            that.goods_status = 0;
          }
          else
          {
            that.goods_status = 1;
          }
          that.start_status =0;
        }
      }
    }
  }
}
</script>
<style>
page{background: #F4F4F4;}
.swiper{position: relative;}
.y{position: absolute;z-index: 99999;right: 10upx;font-size:28upx;color: #F1F1F1;}
/**********************************************/
.mask{position: fixed;bottom: 0;left:0;opacity: 0.5;background: #000000;z-index: 99999;}
.dialog{z-index:999999;background: #FFFFFF;position: fixed;bottom:0;left:0;max-height: 800upx;overflow-y: auto;
  display:flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;padding-top:20upx;}
.dialog_goods{width:96%;margin:0 2%;padding:10upx 0;display: flex;justify-content: flex-start;align-items: flex-start;}
.dialog_pic{width:20%;overflow: hidden;}
.dialog_pic image{width: 100%;}
.goods_con{width:67%;display: flex;flex-direction:column;justify-content: flex-start;align-items: flex-start;margin-left: 3%;}
.dialog_price{font-size:36upx;color: #ef3d19;font-weight: bold;}
.dialog_y{font-size: 28upx;color: #999999;margin-top: 10upx;}
.specs{width:96%;margin:0 2%;max-height: 600upx;overflow-y: auto;}
.specs_title{font-size: 28upx;color: #999999;font-weight: bold;}
.specs_unit{width:82%;margin:5upx 2%;display: flex;justify-content: flex-start;align-items: center;height: 70upx;}
.specs_unit image{width:60upx;margin-right:20upx;}

.current_tag{background:#edfffb;border: 1px solid #9fe7d9;border-radius: 10upx;line-height: 70upx;padding:0 15upx;}

.specs_name{font-size: 26upx;}
.dialog_foot{width:96%;margin:10upx 2%;display: flex;justify-content: flex-end;align-items: center;height: 100upx;}
.goods_property image{width:50upx;height: 50upx;}
.title{width:94%;padding:30upx 3% 10upx 3%;display: flex;justify-content: space-between;align-items: center;background: #FFFFFF;}
.title_price{color: #DD524D;font-size: 56upx;font-weight: bold;}
.title_price text{text-decoration: line-through;color: #CCCCCC;font-size:40upx;padding-left:20upx;}
.integral{font-size:32upx !important;color: #DD524D !important;text-decoration: none !important;}
.share image{width:45upx;height: 45upx;}
.title_goods_name{width:92%;padding:0 4%;font-size: 36upx;line-height: 50upx;font-weight: bold;color: #282828;background: #FFFFFF;}
.title_remark{width:92%;padding:0 4%;font-size: 26upx;color: #999;line-height: 35upx;background: #FFFFFF;}
.service image{width:100%;}
.shop_name image{width: 50%;}
.shop_info_view{margin-bottom: 150upx;width:96%;color: #282828;font-size: 24upx;padding:0 2%;line-height: 50upx;}
.shop_info_view image{width:100%;}
.menu_title{width:96%;padding:10upx 2%;height: 80upx;display: flex;justify-content:center;align-items: center;flex-direction: column;position:relative;}
.content_name{font-size:80upx;padding:0 50upx;background: #F4F4F4;font-size:36upx;z-index:99;}
.line{width:60%;height: 1px;background: #CCCCCC;position: absolute;top: 50upx;z-index: 9;}

.foot_right{background:#ff1844;width: 96%;margin-right: 2%;text-align: center;height: 80upx;line-height:80upx;font-size: 28upx;
  color: white;border-radius: 40upx 40upx 40upx 40upx;}
.foot_right1{background:#c1c1c1;width: 96%;margin-right: 2%;text-align: center;height: 80upx;line-height:80upx;font-size: 28upx;
  color: white;border-radius: 40upx 40upx 40upx 40upx;}
.foot_button{background-image: linear-gradient(#eeeeee, #cccccc);width:100%;text-align: center;height: 80upx;
  line-height: 80upx;font-size: 28upx;color: white;border-radius: 40upx;}
.jian image{width:30upx;height: 30upx;}
.list_unit image{width:50upx;height: 50upx;}
.title{width:94%;padding:10rpx 3%;display: flex;justify-content:space-between;}
.foot{display: flex;height: 100upx;width: 100%;position: fixed;bottom: 0upx;background: #FFFFFF;justify-content: flex-end;align-items: center;z-index: 9999;}
</style>
